<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>弹出框-dialog-原生js封装</title>
	<link rel="shortcut icon" href="../public/image/favicon.ico" type="images/x-icon"/>
	<link rel="icon" href="../public/image/favicon.png" type="images/png"/>
	<link rel="stylesheet" type="text/css" href="../public/style/cssreset-min.css">
	<link rel="stylesheet" type="text/css" href="../public/style/common.css">
	<style type="text/css">
		button{
			font-family: "Microsoft Yahei",Arial,Helvetica;
		}
		.button{
			margin-bottom:20px;
		}
		.dialog .widget-container{
			position:relative;
			width:320px;
			height:200px;
			background:#fff;
		}
		.dialog .widget-title{
			height:40px;
			padding-left:8px;
			background:#cee1ee;
			line-height:40px;
		}
		.dialog .widget-close{
			position:absolute;
			top:0;
			right:0;
			width:40px;
			height:40px;
			line-height:40px;
			text-align:center;
			cursor:pointer;
		}
		.dialog .widget-content{
			height:100px;
			padding:10px;
			line-height:100px;
			text-align:center;
		}
		.dialog .widget-buttons{
			height:40px;
			padding:0 20px;
			line-height:40px;
			text-align:right;
		}
		.dialog .widget-buttons button{
			width:80px;
			height:22px;
			border:none;
			line-height:22px;
			background:#cee1ee;
			outline:none;
			cursor:pointer;
		}
	</style>
	<script type="text/javascript" src="../code/dialog.js"></script>
</head>
<body>
	<div class="header">
        <a href="https://github.com/huanghanzhilian/widget" target="_blank">项目地址</a>
        <a href="/">返回首页</a>
    </div>
    <div class="main">
    	<button id="btn1" class="button">打开对话框</button>
		<div class="dialog dialog1">顶顶顶</div>
		<div class="code">
			<p>
<pre>
var btn1 = document.getElementById("btn1");
new dialog(".dialog1", {
	title: "警告",
	'buttons': {
		'确定': function(api) {
			api.close();
		}
	}
}, function(api) {
	btn1.onclick = function() {
		api.open();
		api.setContent("你好");
		console.log(api.getButtons());
		console.log(api.isOpen());
	}
})
</pre>
			</p>
		</div>
		<script type="text/javascript">
			var btn1 = document.getElementById("btn1");
			new dialog(".dialog1", {
				title: "警告",
				'buttons': {
					'确定': function(api) {
						api.close();
					}
				}
			}, function(api) {
				btn1.onclick = function() {
					api.open();
					api.setContent("你好");
					console.log(api.getButtons());
					console.log(api.isOpen());
				}
			})
		</script>


		<div class="example">
			<div class="call">
				<h1>调用方法：</h1>
				<p>new dialog(selector,options,callback(api));</p>
			</div>
			<h2>options参数</h2>
			<table>
				<thead>
					<tr>
						<th width="150">参数</th>
						<th width="80">默认值</th>
						<th>说明</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>content</td>
						<td>空</td>
						<td>对话框内容</td>
					</tr>
					<tr>
						<td>title</td>
						<td>空</td>
						<td>对话框标题</td>
					</tr>
					<tr>
						<td>opacity</td>
						<td>0.5</td>
						<td>对话框遮罩层透明度</td>
					</tr>
					<tr>
						<td>autoOpen</td>
						<td>false</td>
						<td>是否自动开启对话框</td>
					</tr>
					<tr>
						<td>isModel</td>
						<td>true</td>
						<td>是否为模式兑换</td>
					</tr>
					<tr>
						<td>buttons</td>
						<td>
							空
						</td>
						<td>自定义按键</td>
					</tr>
					
				</tbody>
			</table>
			<h2>callback(api)参数</h2>
			<table>
				<thead>
					<tr>
						<th width="200">方法</th>
						<th>说明</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>open()</td>
						<td>打开对话框</td>
					</tr>
					<tr>
						<td>close()</td>
						<td>关闭对话框</td>
					</tr>
					<tr>
						<td>resize()</td>
						<td>对话框形状自动调整</td>
					</tr>
					<tr>
						<td>setContent()</td>
						<td>设置对话框内容</td>
					</tr>
					<tr>
						<td>getButtons()</td>
						<td>获取按键对象</td>
					</tr>
					<tr>
						<td>isOpen()</td>
						<td>获取对话框是否打开状态</td>
					</tr>
				</tbody>
			</table>
		</div>
    </div>
</body>
</html>
